{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>新增地址</title>
    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/common.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/shipping_new.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/select2.css' %}"/>
    <link rel="icon" href="{% static 'images/favicon.ico' %}"/>
</head>
<body>
<div class="page flex-col justify-between">
    <form id="address-form">
        <input type="hidden" id="redemption_id" value="{{ redemption_id }}">
        <input type="hidden" id="redirect_path" value="{{ redirect_path }}">
        <div class="block_1 flex-col justify-end">
        <textarea id="fullAddress" class="text-wrapper_1 flex-col"
                  placeholder="粘贴或输入完整地址 例如：&#10;张三 13533339999 江苏省扬州市广陵区XX小区X楼xxx室"></textarea>
            <div class="group_1 flex-col">
                <div class="text-wrapper_6 flex-row justify-between">
                    <span class="text_2">收货人</span>
                    <input id="name" class="text_3" placeholder="姓名" value="{{ address.nick_name }}" required>
                    <input type="hidden" id="shipping_id" value="{{ shipping_id }}">
                </div>
                <img
                        class="image_2"
                        referrerpolicy="no-referrer"
                        src="{% static 'images/form_underline.png' %}"
                />
                <div class="text-wrapper_6 flex-row justify-between">
                    <span class="text_2">联系方式</span>
                    <input id="phone" class="text_3" maxlength="11" placeholder="手机号" value="{{ address.mobile }}" required>
                </div>
                <img
                        class="image_2"
                        referrerpolicy="no-referrer"
                        src="{% static 'images/form_underline.png' %}"
                />
                <div class="section_2 flex-row">
                    <span class="text_6">选择地区</span>
                    <div class="province_select" onclick="showDesc()" id="regions"></div>
                    <img class="thumbnail_1" onclick="showDesc()" src="{% static 'images/right_arrow.png' %}"/>
                </div>
                <img class="image_2" src="{% static 'images/form_underline.png' %}"/>
                <div class="text-wrapper_8 flex-row">
                    <span class="text_7">详细地址</span>
                    <textarea class="text_8" placeholder="小区单元楼层" id="address" required></textarea>
                </div>
            </div>
            <div class="group_2 flex-row justify-between">
                <div class="text-group_3 flex-col justify-between">
                    <span class="text_9">设为默认</span>
                    <span class="text_10">系统自动发货时默认使用该地址</span>
                </div>
                <label class="custom-checkbox">
                    <input type="checkbox" name="is_default" id="set_default" {% if address.is_default %}checked{% endif %}>
                    <span class="checkmark"></span>
                </label>
            </div>
{#            <div class="group_3 flex-row">#}
{#                <div class="image-text_2 flex-row justify-between">#}
{#                    <img#}
{#                            class="thumbnail_2"#}
{#                            referrerpolicy="no-referrer"#}
{#                            src="{% static 'images/wechat.png' %}"#}
{#                    />#}
{#                    <span class="text-group_2">一键获取收货地址</span>#}
{#                </div>#}
{#            </div>#}
            <div class="group_4 flex-col">
                <div class="text-wrapper_5 flex-col">
                    <button type="submit" class="text_11">保存</button>
                </div>
            </div>
        </div>
    </form>
    <div class="overlay_description" id="desc_overlay">
        <div class="box_description">
            <div class="selector-container">
                <div class="level" id="level1">
                    <div class="option">省直辖</div>
                </div>
                <div class="level" id="level2">
                    <div class="option">城市</div>
                </div>
                <div class="level" id="level3">
                    <div class="option">城区</div>
                </div>
                <div class="level" id="level4" style="display: none">
                </div>
            </div>
            <div class="container">
                <button class="btn cancel-btn" id="desc_close">取消</button>
                <button class="btn confirm-btn" id="select_confirm">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="{% static 'javascript/jquery-3.6.0.js' %}"></script>
<script src="{% static 'javascript/select2.js' %}"></script>
<script src="{% static 'javascript/shipping.js' %}"></script>
<script src="{% static 'javascript/select_region.js' %}"></script>
<script>
    document.getElementById('fullAddress').addEventListener('input', function () {
        const fullAddress = this.value.trim(); // 获取完整地址
        const nameInput = document.getElementById('name');
        const phoneInput = document.getElementById('phone');
        const addressInput = document.getElementById('address');

        // 正则表达式匹配
        const regex = /^(.*?)\s+(\d{11})\s+(.*)$/; // 匹配格式：收件人 手机号 地址
        const match = fullAddress.match(regex);

        if (match) {
            const name = match[1]; // 收件人
            const phone = match[2]; // 手机号
            const address = match[3]; // 详细地址

            // 填充到对应的输入框
            nameInput.value = name;
            phoneInput.value = phone;
            addressInput.value = address;
        } else {
            // 如果格式不匹配，清空输入框
            nameInput.value = '';
            phoneInput.value = '';
            addressInput.value = '';
        }
    });

    const desc_overlay = document.getElementById('desc_overlay');
    const desc_close = document.getElementById('desc_close');
    desc_overlay.addEventListener('click', (e) => {
        if (e.target === desc_overlay) {
            desc_overlay.style.display = 'none';
            document.body.style.position = '';
        }
    });

    desc_close.addEventListener('click', (e) => {
        desc_overlay.style.display = 'none';
        document.body.style.position = '';
    });

    function showDesc() {
        document.body.style.position = 'fixed'; // 防止页面跳动
        desc_overlay.style.display = 'flex';
    }
</script>
</body>
</html>
